<template>
    <div class="data-panel">
        <div class="data-panel-item" v-for="item in items" :key="item.title">
            <div class="data-panel-item-title">{{item.title}}</div>
            <div class="data-panel-item-count">{{item.count}}</div>
            <div class="data-panel-item-perc">{{item.perc}}</div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            items : [
                {
                    title : '总会话量',
                    count : 230,
                    perc : '较昨日上涨10%'
                },
                {
                    title : '处理中的会话数量',
                    count : 200,
                    perc : '较昨日上涨10%'
                },
                {
                    title : '在线客服数',
                    count : 30,
                    perc : '较昨日上涨10%'
                },
                {
                    title : '今日消息数',
                    count : 2300,
                    perc : '较昨日上涨10%'
                },
            ]
        }
    }
}
</script>

<style>
.data-panel{
    width: 1252px;
    height: 203px;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 10px;
}

.data-panel-item{
    width: 305px;
    height: 170px;
    background-color: rgba(0, 110, 255, 0.05);
    text-align: center;
    line-height: 55px;
    padding: 0;
    margin: 0;
}

.data-panel-item-title{
    font-size: 14px;
}

.data-panel-item-count{
    font-size: 48px;
    font-weight: 650;
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif
}

.data-panel-item-perc{
    font-size: 12px;
    color: #999999;
}

.data-panel-item:nth-child(1) .data-panel-item-count{
    color: rgba(0, 110, 255, 0.898039215686275);
}

.data-panel-item:nth-child(2) .data-panel-item-count{
    color: #FF6262;
}

.data-panel-item:nth-child(3) .data-panel-item-count{
    color: #2ED477;
}

.data-panel-item:nth-child(4) .data-panel-item-count{
    color:#FF9138;
}
</style>